<template>
<div class="user-container">
  <div class="info-box">
  <van-image
    width="64"
    height="64"
    round
    fit="cover"
    :src="userInfo.photo"
  />
  <h2 class="name">
    {{userInfo.name}}
    <br />
    <van-tag type="primary" color="#fff" text-color="#3296fa"
      >{{userInfo.birthday}}</van-tag
    >
  </h2>
  <!-- 操作导航 -->
</div>
<van-row class="user-nav">
  <van-col span="8">
    <van-icon name="newspaper-o" color="#7af" />我的作品
  </van-col>
  <van-col span="8">
    <van-icon name="star-o" color="#f00" />我的收藏
  </van-col>
  <van-col span="8">
    <van-icon name="tosend" color="#fa0" />阅读历史
  </van-col>
</van-row>
<van-cell-group class="user-group">
  <van-cell icon="edit" title="编辑资料" is-link @click="$router.push({path:'/edit'})"/>
  <van-cell icon="chat-o" title="小智同学" is-link />
  <van-cell icon="setting-o" title="系统设置" is-link />
  <van-cell icon="warning-o" title="退出登录" is-link @click="loyout"/>
</van-cell-group>
</div>
</template>

<script>
import {getUserInfo} from '@/API/login'
import {removeToken} from '@/utils/token.js'
export default {
name:"user",
data(){
return{
  userInfo:{}
}
},
created(){
  getUserInfo().then(res=>{
    // console.log(res);
    this.userInfo=res.data.data
    this.$store.commit('updateUserInfo',res.data.data)
  })
},methods:{
  loyout(){
    this.$dialog.confirm({
  title: '提示',
  message: '您是否确认退出',
}).then(()=>{
  removeToken()
  this.userInfo={}
  this.$router.push({path:'/login'})
}).catch(()=>{
  console.log('您取消了退出');
})
  }
}
}
</script>

<style lang='less'>
.user-container{
    .info-box {
    height: 100px;
    background-color: #3296fa;
    display: flex;
    align-items: center;
    padding-left: 15px;
    .name {
      font-size: 18px;
      margin-left: 15px;
      color: white;
      font-weight: normal;
    }
  }
   .user-nav {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
      padding-bottom: 5px;
    }
  }
}
</style>